
<template>
  <el-container class="el-container" style="height:100%;">
   <el-aside width="220px" class="el-aside">
        <!-- <h5>轩城图书管理系统</h5> -->
    <img src="../../assets/images/logo.jpg" alt="logo图标" class="logo">

    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64"text-color="#fff"  active-text-color="#ffd04b">
     <el-menu-item index="1-1" style="color: rgb(255, 255, 255);">
       <span><router-link to="/index"><i class="el-icon-s-operation"></i>首页</router-link></span>
     </el-menu-item>
      
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-user"></i>
            <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1"><router-link to="/admin/manageUsers">管理用户</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class=" el-icon-s-claim "></i>
          <span>订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1"><router-link to="/admin/manageOrders">管理订单</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>

       <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-reading"></i>
          <span>书籍管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1"><router-link to="/admin/manageProduct">管理书籍</router-link></el-menu-item>
          <el-menu-item index="4-2"><router-link to="/admin/manageProductCatlog">管理书籍分类</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
       
        <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-collection"></i>
          <span>日志管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1"><router-link to="/log/loginLog">登录日志</router-link></el-menu-item>
          <el-menu-item index="5-2"><router-link to="/log/Ulog">操作日志</router-link></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
      </el-aside>​


  
    <el-container>
        <el-header style="text-align: right; font-size: 12px ;height:11.5%;">
            
          <div class="leftAndup">图书商城后台管理系统</div>
            
           <i class="el-icon-user-solid "> 管理员:[{{adminName}}]</i>
           
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right:15px"></i>
            <el-dropdown-menu >
              <el-dropdown-item>
            
              

              
              </el-dropdown-item>
              <el-dropdown-item> <span  @click="logout()">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
                
      <el-main>
      

           <router-view>  </router-view>
  
     
      
    </el-main>
	    

      </el-container>
    </el-container>
   
   
</template>

<script>

export default {
  name:"adminIndex", 
 data(){
   return{
     
     adminName:''

   }
 },
 
    
  methods: {
      logout(){
        localStorage.removeItem('admin');
         this.adminName=localStorage.getItem('admin');
        
        if(this.adminName==null){
          alert('退出系统')
          this.$router.push({path:'/login'})
          
        }


        
      }, handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    
      
      
    },mounted:function(){
      this.adminName=localStorage.getItem('admin');
  
     
      
    }
}
</script>

<style scoped lang="scss">

 .el-header {
      background-color: #1b8fac;
      color: #333;
      line-height: 80px;
     border-bottom: 2px solid black;
    }
    .el-icon-caret-right{
      background-color: #048bd1;
    }
  .el-submenu{
    margin-top:10px ;
  }
    .el-aside {
      color: #333;
      height: 100%;
      width: 100%;
      background-color: #545c64;
     
    }
  .logo{
    width: 100%;
    height: 12%;
  }
   
    a{
      text-decoration: none;
      color: white;
    }
   .el-aside i{
     margin-left: -20px;
   }
  .el-icon-s-fold{
      position: relative;
      left: -90%;

      
  }
  .leftAndup{
    float: left;
    font-size: 18px;
    font-family: "仿宋";
  }

</style>
